<template>
  <div id="addStock">
    <mt-header fixed title="万能选股">
      <mt-button icon="back" slot="left" @click="goBack"></mt-button>
    </mt-header>
    <div class="add-stock-cont">
      <div class="add-stock">
        <div class="add-left">
          <div class="add-left-wrapper">
            <div class="add-left-tab">
              <div class="tb tb-l">
                <label class="btn-check" @click="selectAll1">
                  <i class="fa btn-check" :class="checkAll?'fa-check-circle-o':'fa-circle-o'" aria-hidden="true"></i>
                  <!--<input type="checkbox" class="checkbox" @click="selectAll"/>-->
                  全选
                </label>
              </div>
              <div class="tb tb-r" @click="goBack">
                <span>取消</span>
              </div>
            </div>
            <div class="add-left-list">
              <div class="add-right-item" v-for="(item, index) in proData">
                <div class="tb">
                  <label class="btn-check" @click="selectOne(item)">
                    <i class="fa btn-check" :class="item.isSelect?'fa-check-circle-o':'fa-circle-o'"
                       aria-hidden="true"></i>
                  </label>
                </div>
                <div class="tb">
                  <!--<span>{{item.stock_name}}</span>-->
                  <p>{{item.name}}</p>
                  <!--<p>{{item.ID}}</p>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="add-right">
          <div class="add-right-wrapper">
            <div class="add-right-tab">
              <div>当前价(元)</div>
              <div>涨跌幅</div>
              <div>市盈率</div>
              <div>所属行业</div>
            </div>
            <div class="add-right-list">
              <div class="add-right-item" v-for="(s, index) in proData" :key="index">
                <div :class="s.now>0?'bg_red':'bg_green'">
                  {{(Number(s.now)).toFixed(2)}}
                </div>
                <div :class="(s.now-s.yesterday)>0?'bg_red':'bg_green'">
                  {{((s.now - s.yesterday) * 100 / s.yesterday).toFixed(2) + '%'}}
                </div>
                <div>
                  {{s.pgr ? s.pgr : '--'}}
                </div>
                <div>{{s.industries}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-wrapper">
        <div class="add-stock" @click="addStock">添加自选</div>
        <div class="save-strategy" @click="saveStratrgy">保存策略</div>
      </div>
      <mt-actionsheet
        :actions="actions1"
        v-model="sheetVisible">
      </mt-actionsheet>
    </div>
  </div>
</template>

<script>
  //  import './../../static/css/test.scss'
  import {getQuote} from './../utility/test01'
  // import API from './../services/api'
  // import {MessageBox} from 'mint-ui'
  import {Toast} from 'mint-ui'

  export default {
    name: 'addStock',
    data () {
      return {
        proData: [],
        selectArr: [],
        checkAll: false,
        dialogVisible: false,
        sheetVisible: false,
        actions1: [
          {
            name: '收藏策略',
            method: {}
          },
          {
            name: '+新建策略',
            method: () => {
              this.newStrategy()
            }
          }
        ]
      }
    },
    created () {
      // this.getStockList()
//      this.getStockListTest()
      this.getStockListTest1()
      // this.showStockListFunc()
    },
    watch: {
      selectArr (n, o) {
        // console.log(n, o)
      }
    },
    methods: {
      goBack: function () {
        history.back()
      },
      selectAll (event) {
        var _this = this
        // console.log(event.currentTarget.checked)
        this.checkAll = event.currentTarget.checked
        if (!this.checkAll) {
          this.selectArr = []
        } else {
          _this.selectArr = []
          _this.proData.forEach(function (item, i) {
            _this.selectArr.push(item)
          })
        }
        // console.log(this.selectArr)
      },
      selectAll1 () {
        let _this = this
        this.checkAll = !this.checkAll
        if (this.checkAll) {
          _this.proData.forEach(function (item, i) {
            item.isSelect = true
          })
        } else {
          _this.proData.forEach(function (item, i) {
            item.isSelect = false
          })
        }
      },
      selectOne (_item) {
        _item.isSelect = !_item.isSelect
      },
      showStockListFunc () {
        let _self = this
        let strCode = this.$route.query.factors
        // console.log(strCode)
        API.getStockCodes({params: {factors: strCode}}).then((res) => {
          return res.Data
        }).then(res => {
          API.getStockResults({params: {IDs: res}}).then((req) => {
            if (!Array.isArray(req.Data)) {
              _self.proData = []
            } else {
              _self.proData = req.Data
            }
          })
        })
      },
      // 获取股票列表
      getStockList () {
        let _self = this
        let strCode = this.$route.query.factors
        API.getStockCodes({params: {factors: strCode}}).then((res) => {
          // console.log('stock', res)
          return res.data
        }).then((res) => {
          let _ids = []
          res.forEach(v => {
            _ids.push(v.stock_code)
          })
          let _ids1 = _ids.join(',')
          API.getStockResults({params: {stock_codes: _ids1}}).then((req) => {
            // console.log('req', req)
            let x = []
            req.data.forEach(v => {
              x[v.stock_code] = v
            })
            res.forEach(v => x[v.stock_code] && (x[v.stock_code].industries = v.industries))
            x = null
            if (!Array.isArray(req.data)) {
              _self.stockResult = []
            } else {
              // _self.proData = req.Data
              req.data.forEach(v => {
                v.isSelect = false
                _self.proData.push(v)
              })
            }
            // console.log('stockResult', _self.proData)
          })
        })
      },
      getStockListTest () {
        let _self = this
        let strCode = this.$route.query.factors
        API.getStockCodes({params: {factors: strCode}}).then((res) => {
          // console.log('stock', res)
          return res.data
        }).then((res) => {
          if (res.length > 0) {
            let _ids = []
            res.forEach(v => {
              _ids.push(v.stock_code)
            })
            let _ids1 = _ids.join('|')
            API.getStockResults({params: {IDs: _ids1}}).then((req) => {
              // console.log('req', req)
              let x = []
              req.Data.forEach(v => {
                x[v.ID] = v
              })
              res.forEach(v => x[v.stock_code] && (x[v.stock_code].industries = v.industries))
              x = null
              if (!Array.isArray(req.Data)) {
                _self.proData = []
              } else {
                // _self.proData = req.Data
                req.Data.forEach(v => {
                  v.isSelect = false
                  _self.proData.push(v)
                })
              }
            })
          } else {
            _self.proData = []
          }
        })
      },
      // 测试 --- 02
      getStockListTest1 () {
        let _self = this
        let strCode = this.$route.query.factors
        API.getStockCodes({params: {factors: strCode}}).then((res) => {
          // console.log('stock', res)
          return res.data
        }).then((res) => {
          if (res.length > 0) {
            let _ids = []
            res.forEach(v => {
              _ids.push(v.stock_code)
            })
            let _ids1 = _ids.join(',')
            getQuote(_ids1).then((req) => {
              let x = []
              req.forEach(v => {
                x[v.code + '.' + v.market] = v
              })
              res.forEach(v => x[v.stock_code] && (x[v.stock_code].industries = v.industries))
              x = null
              if (!Array.isArray(req)) {
                _self.proData = []
              } else {
//                _self.proData = req
                req.forEach(v => {
                  v.isSelect = false
                  _self.proData.push(v)
                })
              }
              window.scrollTo(0, 0)
            })
          } else {
            _self.count = 0
            _self.stockResult = []
          }
        })
      },
      addStock () {
        let a = this.proData.filter(v => {
          return v.isSelect === true
        })
        if (a.length > 0) {
          Toast({
            message: '添加成功！',
            position: 'bottom',
            duration: 3000
          })
        } else {
          Toast({
            message: '请勾选因子！',
            position: 'bottom',
            duration: 3000
          })
        }
      },
      // 保存策略
      saveStratrgy () {
        this.sheetVisible = true
      },
      newStrategy: function () {
        let selectFactors = this.$store.state.selectFactors
        let allFactors = this.$store.state.allFactors
        let b = allFactors.filter(v => {
          return this.$route.query.factors.indexOf(v.factor_id) > -1
        })
        if (b.length > 0 || selectFactors.length > 0) {
          this.$router.push('/newStrategyName')
        } else {
          Toast({
            message: '未选择因子',
            position: 'bottom',
            duration: 3000
          })
        }
      }
    },
    mounted () {
    },
    computed: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  #addStock {
    background: #f8f8f8;
    .mint-header.is-fixed {
      background-color: #0f1316;
      z-index: 99;
    }
    .add-stock-cont {
      margin-top: 1.25rem;
      .add-stock {
        position: relative;
        width: 100%;
        height: 100%;
        .add-left {
          width: 35%;
          position: absolute;
          .add-left-wrapper {
            width: 100%;
            .btn-check {
              .checkbox {
                display: none;
              }
              .btn-check {
                font-size: 18px;
                color: #1296db;
              }
            }
            .add-left-tab {
              height: 0.96rem;
              line-height: 0.96rem;
              background: #ffffff;
              border-bottom: 1px solid #e5e5e5;
              color: #1296db;
              display: box;
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              .tb {
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                /*width: 20%;*/
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                text-align: center;
                border-right: 1px solid #e5e5e5;
              }
              .tb.tb-l {
              }
            }
            .add-left-list {
              /*width: 35%;*/
              .add-right-item {
                height: 36px;
                line-height: 36px;
                display: box;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                div {
                  &:nth-of-type(1) {
                    margin-left: 0.2666667rem;
                  }
                  &:nth-of-type(2) {
                    width: 100%;
                    font-weight: 600;
                    text-align: center;
                  }
                }
                /*div {*/
                /*flex: 1;*/
                /*text-align: center;*/
                /*}*/
              }
            }
          }
        }
        .add-right {
          width: 65%;
          margin-left: 35%;
          overflow-x: scroll;
          white-space: nowrap;
          .add-right-wrapper {
            width: 160%;
            .add-right-tab {
              height: 0.96rem;
              line-height: 0.96rem;
              background: #ffffff;
              border-bottom: 1px solid #e5e5e5;
              display: box;
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              div {
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                /*width: 20%;*/
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                text-align: center;
              }
            }
            .add-right-list {
              .add-right-item {
                height: 0.96rem;
                line-height: 0.96rem;
                display: box;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                div {
                  -webkit-box-flex: 1;
                  -moz-box-flex: 1;
                  /*width: 20%;*/
                  -webkit-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                  text-align: center;
                }
              }
            }
          }
        }
        .sort-stock-tab {
          height: 1.0666667rem;
          /*line-height: 1.0666667rem;*/
          display: box;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -webkit-box-orient: horizontal;
          -webkit-flex-direction: row;
          -moz-flex-direction: row;
          -ms-flex-direction: row;
          -o-flex-direction: row;
          flex-direction: row;
          font-size: 0.3466667rem;
          border-bottom: 1px solid #e5e5e5;
          div {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            /*width: 20%;*/
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            color: #a0a0a0;
          }
        }
        .sort-stock-list {
          .sort-stock-list-item {
            height: 1.0666667rem;
            /*line-height: 1.0666667rem;*/
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            -o-justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -webkit-box-orient: horizontal;
            -webkit-flex-direction: row;
            -moz-flex-direction: row;
            -ms-flex-direction: row;
            -o-flex-direction: row;
            flex-direction: row;
            background: #ffffff;
            border-bottom: 1px solid #e5e5e5;
            div {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              /*width: 20%;*/
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
              color: #a0a0a0;
              &:nth-of-type(1) {
                display: box;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-flex-direction: column;
                -moz-flex-direction: column;
                -ms-flex-direction: column;
                -o-flex-direction: column;
                flex-direction: column;
                p {
                  -webkit-box-flex: 1;
                  -moz-box-flex: 1;
                  /*width: 20%;*/
                  -webkit-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                }
              }
            }
          }
        }
      }
      .bg_red {
        color: red;
      }
      .bg_green {
        color: green;
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      border-top: 1px solid #e5e5e5;
      width: 100%;
      background: #ffffff;
      z-index: 99;
      .footer-wrapper {
        display: box;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;
        height: 0.96rem;
        .add-stock {
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          /*width: 20%;*/
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          border-right: 1px solid #e5e5e5;
        }
        .save-strategy {
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          /*width: 20%;*/
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
        }
      }

    }
  }

</style>
